import Base from "../base.js";
import movieService from "../../service/movieService.js";

export default class extends Base {

  constructor(props) {
    super(props);
    this.movie = movieService.getMovie();
  }

  render() {
    const template = `
    <form class="layui-form" action="" style="width:330px">
      <div class="layui-form-item">
        <label class="layui-form-label">电影名</label>
        <div class="layui-input-block">
          <input type="text" name="cname" required  lay-verify="required" placeholder="请输入电影名" autocomplete="off" class="layui-input" value="${this.movie.cname}">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">英文名</label>
        <div class="layui-input-block">
          <input type="text" name="ename" required  lay-verify="required" placeholder="请输入英文名" autocomplete="off" class="layui-input" value="${this.movie.ename}">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
          <select name="type" lay-verify="required" class="type">
            <option value="动作">动作</option>
            <option value="爱情">爱情</option>
            <option value="悬疑">悬疑</option>
            <option value="科幻">科幻</option>
            <option value="恐怖">恐怖</option>
            <option value="喜剧">喜剧</option>
            <option value="文艺">文艺</option>
            <option value="剧情">剧情</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">首映地址</label>
        <div class="layui-input-block">
          <select name="area" lay-verify="required" class="area">
          <option value="美国">美国</option>
          <option value="欧洲">欧洲</option>
          <option value="中国大陆">中国大陆</option>
          <option value="日本">日本</option>
          <option value="韩国">韩国</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">电影状态</label>
        <div class="layui-input-block check">
          <input type="radio" name="status" value="0" title="热映">
          <input type="radio" name="status" value="1" title="经典">
          <input type="radio" name="status" value="2" title="即将">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">上映时间</label>
        <div class="layui-input-block">
          <input type="text" name="upDate" class="layui-input" id="upDate" placeholder="yyyy-MM-dd" value="${this.movie.upDate}">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-block">
          <input type="text" name="score" required  lay-verify="required" placeholder="请输入评分" autocomplete="off" class="layui-input" value="${this.movie.score}">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">想看</label>
        <div class="layui-input-block">
          <input type="text" name="number" required  lay-verify="required" placeholder="请输入想看人数" autocomplete="off" class="layui-input" value="${this.movie.number}">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">票房</label>
        <div class="layui-input-block">
          <input type="text" name="count" required  lay-verify="required" placeholder="请输入票房" autocomplete="off" class="layui-input" value="${this.movie.count}">
        </div>
      </div>
      <div class="layui-form-item director" style="width:430px">
        <label class="layui-form-label">导演</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="director" required  lay-verify="required" placeholder="请输入导演" autocomplete="off" class="layui-input" value="${this.movie.director}">
        </div>
        <span style="line-height: 38px;color: #a6a6a6;">多导演用,隔开</span>
      </div>
      <div class="layui-form-item actor" style="width:430px">
        <label class="layui-form-label">演员</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="actor" required  lay-verify="required" placeholder="请输入演员" autocomplete="off" class="layui-input" value="${this.movie.actor}">
        </div>
        <span style="line-height: 38px;color: #a6a6a6;">多演员用,隔开</span>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">剧情简介</label>
        <div class="layui-input-block">
          <textarea name="intro" placeholder="请输入内容" class="layui-textarea">${this.movie.intro}</textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn save" lay-submit lay-filter="save">保存</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    <form>
        `
    this.$el.html(template);
    this.rerender();
  }

  rerender() {
    // console.log(this.movie);
    for (let i = 0; i < $(".type option").length; i++) {
      if($(".type option")[i].innerHTML == this.movie.type){
        $(`.type option:nth-child(${i+1})`).attr("selected",true);
      }
    }
    for (let i = 0; i < $(".area option").length; i++) {
      if($(".area option")[i].innerHTML == this.movie.area){
        $(`.area option:nth-child(${i+1})`).attr("selected",true);
      }
    }
    const status = parseInt(this.movie.status)+1;
    $(`.check>input:nth-child(${status})`).attr("checked",true)
  }

  handle(){
    const that = this;
    this.form.on('submit(save)',function (data) {
    //   console.log(data.field.director);
      that.update(data.field);
      location.hash = "#/info/movieList"
      return false;
    });
  }

  async update(data){
    data._id = this.movie._id;
    data.director = JSON.stringify(data.director.split(","));
    data.actor =  JSON.stringify(data.actor.split(","));
    await movieService.update(data);
  }

  layui() {
    this.element.render();
    this.form.render();
    this.laydate.render({
      elem: '#upDate'
    });
  }
  
}